<template>
  <div class="container">
    <h3>题组管理</h3>
    <el-card>
      <!-- 基础头部 -->
      <div class="basicsHeader">
        <span class="explain">说明：目前支持学科和关键字条件筛选</span>
        <!-- 点击可跳转试题录入 -->
        <el-button type="success" @click="$router.push('new')" size="small" icon="el-icon-edit"
          >新增试题</el-button
        >
      </div>
      <!-- 表单 -->
      <el-form size="small" :model="form" ref="dengmiQueryForm" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select @change="twoleve" v-model="form.subjectName" >
                <el-option v-for="item in subjectDataList" :key="item.id" :label="item.label" :value="item.value" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="form.twoLevelDirectory" >
                <el-option v-for="item in twoLevelList" :key="item.value" :label="item.label" :value="item.value" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

       <!--    <el-col :span="6">
            <el-form-item label="标签">
              <el-select>
                <el-option>11</el-option>
                <el-option>1122</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input placeholder="根据题干搜索" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select>
                <el-option>11</el-option>
                <el-option>1122</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select>
                <el-option>11</el-option>
                <el-option>1122</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select>
                <el-option>11</el-option>
                <el-option>1122</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select>
                <el-option>11</el-option>
                <el-option>1122</el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-col :span="12">
                <el-select>
                  <el-option>11</el-option>
                  <el-option>1122</el-option>
                </el-select>
              </el-col>
              <el-col :span="12">
                <el-select>
                  <el-option>11</el-option>
                  <el-option>1122</el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <div class="btnRight">
              <el-button size="mini">清除</el-button>
              <el-button type="primary" size="mini">搜索</el-button>
            </div>
          </el-col> -->
        </el-row>
      </el-form>
    <!-- alert提示 -->
      <el-alert
    type="info"
    :closable="false"
   aria-setsize="mini"
    show-icon>
    数据一共{{totals}} 条
  </el-alert>

    <!-- table表格 -->
    <el-table
      :data="reqbasicsList"
    style="width: 1160px"
    >
    <el-table-column
      fixed
      prop="number"
      label="试题编号"
      width="120px">
    </el-table-column>
    <el-table-column
      prop="subject"
      label="学科"
      width="80px"
     >
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录"
      width="80px">
    </el-table-column>
    <el-table-column
      prop="questionType"
      label="题型"
      :formatter="formatQuest"
      width="80px">
    </el-table-column>
        <el-table-column
      prop="question"
      label="题干"
      width="280px">
      <template #default="{row}" >
        {{row.question|html2Text()}}
      </template>
    </el-table-column>
    <el-table-column
      prop="addDate"
      label="录入时间"
      width="180px" #default="{row}" >
      {{row.addDate|parseTimeByString()}}
    </el-table-column>
    <el-table-column
      prop="difficulty"
      label="难度"
      width="80px" :formatter="formatDiff" >

    </el-table-column>
        <el-table-column
      prop="creator"
      label="录入人"
      width="80px">
    </el-table-column>

    <el-table-column
      label="操作"
      width="180px">
      <template #default="{row}" >
  <el-button type="primary" icon="el-icon-view" @click="clickDialog(row)" circle></el-button>
  <el-button type="success" icon="el-icon-edit"  @click="$router.push(`new?id=${row.id}`)" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" @click="handledel(row.id)" circle></el-button>
  <el-button type="warning" icon="el-icon-check" @click="choiceness(row.id)" circle></el-button>
      </template>
    </el-table-column>

  </el-table>

  <!-- 分页 -->

    <div class="pagination" >
           <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10,20, 30]"
      :page-size="5"
      background
      layout=" prev, pager,next,sizes,jumper"
      :total="totals">
    </el-pagination>
    </div>

    </el-card>

    <!-- 预览dialog -->
    <QuestionPreview :data="data"  ></QuestionPreview>
  </div>
</template>

<script>
import { list as questionsList, choiceAdd, remove as delQuestion } from '@/api/hmmm/questions'
import { simple as subjectsList } from '@/api/hmmm/subjects'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
//, 目录
import { detail as directorysSimple, simple as twoleveDetail } from '@/api/hmmm/directorys'
import QuestionPreview from '../components/questions-preview.vue'
export default {
  components: {
    QuestionPreview
  },
  data () {
    return {
      // 预览框
      data: {
        show: false,
        info: {}
      },
      // 表单
      form: {
        // 学科
        subjectName: '',
        // 二级目录
        twoLevelDirectory: ''

      },
      // 学科列表
      subjectDataList: [],
      // 二级目录列表
      twoLevelList: [],
      // 基础列表
      reqbasicsList: [],
      // 难度
      difficulty,
      // 题型
      questionType,
      // 方向
      direction,
      // 学科简单列表
      page: 1,
      pagesize: 5,
      totals: 0

    }
  },
  created () {
    this.basicsList()
    this.subjectData()
  },
  methods: {
    // 点击预览
    clickDialog (info) {
      this.data.show = true
      this.data.info = info
    },
    // 基础题信息列表
    async basicsList () {
      const { data } = await questionsList({ page: this.page, pagesize: this.pagesize })
      this.totals = data.counts
      console.log(data, '基础')
      this.reqbasicsList = data.items
      console.log('基础列表', this.reqbasicsList)
    },
    // 学科列表
    async subjectData () {
      const { data } = await subjectsList()
      this.subjectDataList = data
      console.log('学科列表', this.subjectDataList, data)
    },
    // 二级目录
    async twoleve (id) {
      console.log(id, '二级')
      this.twoLevelList = []
      const { data } = await twoleveDetail({ id })
      this.twoLevelList = data
      console.log('二级目录', this.twoLevelList)
    },
    // 过滤筛选难度等
    formatDiff (row, clo, cell, index) {
      const obj = this.difficulty.find(item => item.value === +cell)
      return obj.label
    },
    // 题型
    formatQuest (row, col, cell) {
      const obj = this.questionType.find(item => item.value === +cell)
      return obj.label
    },
    // 目录列表
    async getDirectorysSimple (row, col, cell) {
      const res = await directorysSimple(cell)
      // const obj = data.find(item => item.value === +cell)
      // console.log(data)
      console.log(cell, res, '目录')
      // return obj.label
    },
    handleCurrentChange (val) {
      console.log(val, 'w')
      this.page = val
      this.basicsList()
    },
    handleSizeChange (val) {
      console.log(val, 'q')
      this.pagesize = val
      this.page = 1
      this.basicsList()
    },
    // 加入精选
    async  choiceness (id) {
      console.log(id)
      await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
      await choiceAdd({ id, choiceState: 1 })
      this.$message.success('加入精选成功')
      this.basicsList()
    },
    // 点击删除
    async  handledel (id) {
      await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await delQuestion({ id })
      this.$message.success('删除成功')
      this.basicsList()
    }
  }
}
</script>

<style scoped lang="scss">
.basicsHeader .explain {
  color: pink;
  font-size: 12px;
}
.basicsHeader .el-button {
  float: right;
}
.basicsHeader {
  margin-bottom: 20px;
}
.btnRight {
  float: right;
}
.el-alert{
  height:30px;
  margin-bottom: 10px;
}
.el-alert::v-deep{
  .el-alert__icon{
    font-size: 20px;
  }
}
 .el-table .el-button{
      width: 32px;
      height: 32px;
    }
.pagination{
  float: right;
}

</style>
